<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
.clear:after{content: "";height: 0;clear: both;overflow: hidden;display: inline-block;}
.clear{*zoom: 1;}
.content{width: 400px;height: 210px;margin: 20px auto;overflow: hidden;position: relative;}
#div-box{width: 2400px;position: absolute;left: 0;top: 0;}
#div-box>img{width: 400px;height: 210px;float: left;}
#indictor{position: absolute;right: 0px;bottom: 5px;z-index: 1;}
#indictor>button{width: 30px;height: 20px;margin: 0 2px;background-color: #00f;color: #fff;border: none;}
#indictor .active{background-color: #f00; }

</style>

</head>
<body>
<div class="content">
    <div id="div-box" class="clear">
        <img src="images/1.png" alt="">
        <img src="images/2.png" alt="">
        <img src="images/3.png" alt="">
        <img src="images/4.png" alt="">
        <img src="images/5.png" alt="">
        <img src="images/6.png" alt="">
    </div>
    <div id="indictor">
        <button type="button" class="active">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button">4</button>
        <button type="button">5</button>
        <button type="button">6</button>
    </div>
</div>


<script>
$(function(){
var index = 0;
function start_move()
{
    $('button').eq(index).addClass('active').siblings().removeClass('active');
    $('div#div-box').css('left',-index*400 + 'px');
    index++;
    if(index == 6){index = 0;}
}
var timer = setInterval(start_move,1000);
$('button').hover(function(e)//event.currentTarget,获取事件
{
clearInterval(timer);
$(e.currentTarget).addClass('active').siblings().removeClass('active');
index = $(e.currentTarget).index();//当前为第一个元素，即下标为0
$('div#div-box').css('left',-index*400 + 'px');

},function(){
timer=setInterval(start_move,1000);
});

});


</script>
</body>
</html>